@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&display=swap');

a {
    text-decoration: none;
}

#algae-1 {
    left: 100px;
}

#algae-2 {
    left: 800px;
}

#algae-3 {
    left: 2100px;
}

#algae-4 {
    left: 2200px;
}

#algae-5 {
    left: 3500px;
}

#algae-6 {
    left: 3680px;
}

#algae-7 {
    left: 4900px;
}

#algae-8 {
    left: 5000px;
}

.algae-a {
    bottom: 0;
    width: 80px;
    height: 270px;
    background-image: url(../image/algae-a.png);
}

#alien,
.algae-a,
.algae-b {
    position: absolute;
}

.algae-b {
    background-image: url(../image/algae-b.png);
    bottom: 0;
    width: 162px;
    height: 252px;
}

#alien {
    left: 540px;
    bottom: 30px;
    width: 400px;
    height: 636px;
}

#alien-body {
    position: absolute;
    top: 0;
    height: 515px;
    background-image: url(../image/alien-body.png);
}

#alien-body,
#alien-ship {
    left: 0;
    width: 400px;
}

#alien-ship,
#alien-steer {
    position: absolute;
}

#alien-ship {
    top: 515px;
    height: 121px;
    background-image: url(../image/alien-ship.png);
}

#alien-steer {
    left: 90px;
    top: 430px;
    width: 220px;
    height: 170px;
    background-image: url(../image/alien-steer.png);
}

#balloon {
    position: absolute;
    width: 400px;
    height: 700px;
    background-image: url(../image/balloon.png);
}

.banner {
    margin-bottom: 60px;
}

.banner-button,
.banner-line {
    position: relative;
    width: 152px;
    height: 32px;
}

.banner-line {
    width: 440px;
    height: 1px;
    background-color: #fff;
    margin-bottom: 12px;
}

.banner-text-a {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 24px;
}

.banner-text-a,
.banner-text-b,
.banner-text-c {
    position: relative;
    width: 440px;
    color: #fff;
    margin-bottom: 12px;
}

.banner-text-b {
    line-height: 60px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 60px;
}

.banner-text-c {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 18px;
}

.banner-bottom-a,
.banner-bottom-b {
    position: relative;
    left: 20px;
    width: 480px;
    height: 56px;
    margin-top: -1px;
    background-image: url(../image/banner-bottom-a.png);
}

.banner-bottom-b {
    background-image: url(../image/banner-bottom-b.png);
}

#banners-container,
#boxes {
    position: absolute;
    left: 15%;
    width: 520px;
}

.banner-middle-a,
.banner-middle-b {
    position: relative;
    left: 20px;
    width: 440px;
    padding: 20px;
    background-color: #f7941d; /* Original Orange */
    overflow: hidden;
}

.banner-middle-b {
    background-color: #f26d7d; /* Original Pink */
}

.banner-top-a,
.banner-top-b {
    position: relative;
    width: 520px;
    height: 23px;
    margin-bottom: -1px;
    background-image: url(../image/banner-top-a.png);
}

.banner-top-b {
    background-image: url(../image/banner-top-b.png);
}

body {
    margin: 0;
    background-color: #020617; /* Dark space background */
    background-image: 
      linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    font-family: 'Outfit', sans-serif;
}

/* Solo Leveling Glow Filters for Sprites */
.plant, .fish, .crab, .turtle, #robot, #squid, #alien, #f1-car, .building, .gate {
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.3));
    transition: filter 0.3s ease;
}

/* Solo Leveling Environment Darkening */
.ground, .grass, .waterfall, .mountain, #dock-floor, #dock-column {
    filter: brightness(0.25) contrast(1.2) hue-rotate(180deg);
}

.plant:hover, .fish:hover, .crab:hover, .turtle:hover, #robot:hover, #squid:hover, #alien:hover {
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.6));
}

.ribbon-middle, .sea-ribbon-middle, .plant-ribbon-middle {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
}

#boxes {
    left: 13900px;
    bottom: 20%;
    width: 700px;
    height: 100px;
    background-image: url(../image/box.png);
}

#bubble {
    position: relative;
    left: -50%;
    width: 16px;
    height: 16px;
    background-image: url(../image/bubble.png);
}

#bubble-container,
.building {
    position: absolute;
}

#building-1 {
    left: 0;
    bottom: 0;
    width: 190px;
    height: 500px;
    background-image: url(../image/building-a.png);
}

#building-2 {
    left: 305px;
    bottom: 0;
    width: 275px;
    height: 495px;
    background-image: url(../image/building-b.png);
}

#building-3 {
    left: 710px;
    bottom: 0;
    width: 190px;
    height: 500px;
    background-image: url(../image/building-c.png);
}

.building-enemy-face-a {
    position: absolute;
    left: 25px;
    top: 395px;
    width: 65px;
    height: 65px;
    background-image: url(../image/enemy-face-a.png);
}

.building-enemy-face-a-eyes {
    position: absolute;
    left: 5px;
    top: 10px;
    width: 55px;
    height: 25px;
    opacity: 0;
    filter: alpha(opacity=0);
    background-image: url(../image/enemy-face-a-eyes.png);
}

.building-enemy-face-b {
    position: absolute;
    left: 80px;
    top: 375px;
    width: 80px;
    height: 80px;
    background-image: url(../image/enemy-face-b.png);
}

.building-enemy-face-b-eyes {
    position: absolute;
    left: 7px;
    top: 15px;
    width: 66px;
    height: 30px;
    opacity: 0;
    filter: alpha(opacity=0);
    background-image: url(../image/enemy-face-b-eyes.png);
}

#buildings-container {
    position: absolute;
    left: 4980px;
    bottom: 20%;
    width: 900px;
    height: 80%;
}

.building-leg-container-a,
.building-leg-container-b {
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 470px;
    width: 190px;
    height: 30px;
}

.building-leg-container-b {
    left: 70px;
    top: 465px;
    width: 150px;
}

.building-leg-frame-a,
.building-leg-frame-b {
    position: absolute;
    left: 0;
    top: 0;
    width: 380px;
    height: 30px;
    background-image: url(../image/building-a-leg-frame.png);
}

.building-leg-frame-b {
    width: 300px;
    background-image: url(../image/building-b-leg-frame.png);
}

.chain-block {
    position: absolute;
    bottom: 0;
    width: 100px;
    height: 90px;
    background-image: url(../image/chain-block.png);
}

.chain-block-string {
    position: absolute;
    left: 28px;
    bottom: 60px;
    width: 44px;
    height: 100%;
    background-image: url(../image/chain-block-string.png);
}

.chain-block-and-string-container {
    position: absolute;
    width: 100px;
    height: 100%;
}

.coral-a,
.coral-b {
    width: 200px;
    height: 150px;
    bottom: -70%;
}

.coral-a {
    position: absolute;
    background-image: url(../image/coral-a.png);
}

.coral-b {
    background-image: url(../image/coral-b.png);
}

#coral-1 {
    left: 4800px;
}

#coral-2 {
    left: 5800px;
}

#coral-3 {
    left: 6800px;
}

.contact-confirmation-container,
.coral-b,
.coral-big {
    position: absolute;
}

#coral-big-1 {
    left: 1300px;
    bottom: -70%;
    width: 300px;
    height: 400px;
    background-image: url(../image/coral-big-a.png);
}

#coral-big-2 {
    left: 1700px;
    bottom: -70%;
    width: 650px;
    height: 500px;
    background-image: url(../image/coral-big-b.png);
}

#contact-box {
    position: absolute;
    top: 120px;
    margin-left: -840px;
    width: 940px;
    height: 420px;
    background-image: url(../image/contact-box.png);
}

#contact-box-email {
    position: absolute;
    left: 570px;
    top: 20px;
    width: 350px;
    height: 30px;
    background-image: url(../image/contact-box-hole-a.png);
}

#contact-box-email input,
#contact-box-subject input {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #fff;
    width: 340px;
    margin: 5px;
    border: 0;
    background-color: transparent;
}

#contact-box-email input:focus,
#contact-box-message textarea:focus,
#contact-box-subject input:focus {
    outline: 0;
}

#contact-box-message,
#contact-box-subject {
    position: absolute;
    left: 570px;
    width: 350px;
}

#contact-box-subject {
    top: 65px;
    height: 30px;
    background-image: url(../image/contact-box-hole-a.png);
}

#contact-box-message {
    top: 110px;
    height: 170px;
    background-image: url(../image/contact-box-hole-b.png);
}

#contact-box-message textarea {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #fff;
    width: 340px;
    height: 160px;
    margin: 5px;
    border: 0;
    overflow: hidden;
    resize: none;
    background-color: transparent;
}

#contact-button {
    position: absolute;
    top: 440px;
    margin-left: -210px;
    width: 355px;
    height: 100px;
}

#contact-center {
    position: absolute;
    height: 540px;
    left: 50%;
    bottom: 20%;
}

#contact-cloud-bottom {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 21px;
    background-image: url(../image/contact-cloud-bottom.png);
}

#contact-cloud-middle {
    position: absolute;
    left: 0;
    top: 80%;
    width: 100%;
    height: 20%;
    background-color: #fff;
}

#contact-cloud-seal-bottom,
#contact-cloud-seal-top {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #fff;
}

#contact-cloud-seal-bottom {
    bottom: -1px;
}

#contact-cloud-seal-top {
    top: -1px;
}

#contact-cloud-top {
    position: absolute;
    left: 0;
    bottom: 20%;
    width: 100%;
    height: 21px;
    background-image: url(../image/contact-cloud-top.png);
}

.contact-confirmation {
    position: relative;
    width: 260px;
    height: 190px;
    left: -50%;
}

.contact-confirmation-rectangle {
    position: absolute;
    width: 260px;
    height: 170px;
    background-color: #333;
}

.contact-confirmation-title-a,
.contact-confirmation-title-b {
    position: absolute;
    left: 30px;
    top: 26px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #c69c6d;
    font-size: 35px;
}

.contact-confirmation-title-b {
    font-size: 48px;
}

.contact-confirmation-text-a,
.contact-confirmation-text-b {
    position: absolute;
    left: 30px;
    top: 70px;
    width: 200px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 22px;
    color: #aaa;
}

.contact-confirmation-text-b {
    top: 82px;
    font-size: 24px;
    line-height: 24px;
}

.contact-confirmation-text-c,
.contact-confirmation-text-d {
    position: absolute;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 25px;
    color: #aaa;
}

.contact-confirmation-text-c {
    width: 200px;
    line-height: 25px;
    left: 30px;
    top: 82px;
}

.contact-confirmation-text-d {
    left: 72px;
    top: 68px;
}

.contact-confirmation-triangle {
    position: absolute;
    left: 120px;
    top: 170px;
    width: 20px;
    height: 20px;
    background-image: url(../image/contact-confirmation-triangle.png);
}

#contact-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.cloud {
    position: absolute;
}

.content-noscroll {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cloud {
    width: 180px;
    height: 120px;
    background-image: url(../image/cloud.png);
}

#cloud-1 {
    left: 100px;
    top: 20%;
}

#cloud-2 {
    left: 600px;
    top: 5%;
}

#cloud-3 {
    left: 1300px;
    top: 30%;
}

#cloud-4 {
    left: 1900px;
    top: 20%;
}

#cloud-5 {
    left: 10%;
    bottom: 550px;
}

#cloud-6 {
    left: 25%;
    bottom: 1200px;
}

#cloud-7 {
    left: 70%;
    bottom: 1400px;
}

#cloud-8 {
    left: 40%;
    bottom: 1800px;
}

#cloud-9 {
    left: 80%;
    bottom: 2000px;
}

#container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.crab {
    position: absolute;
    width: 130px;
    height: 89px;
    overflow: hidden;
    background-image: url(../image/crab.png);
}

.crab-eyes {
    position: absolute;
    left: 31px;
    top: 41px;
    width: 38px;
    height: 19px;
    opacity: 0;
    filter: alpha(opacity=0);
    background-image: url(../image/crab-eyes.png);
}

#crab-ribbon-container-1 {
    top: 0;
}

#crab-ribbon-container-2 {
    top: 100px;
}

#crab-ribbon-container-3 {
    top: 200px;
}

#crab-ribbon-container-4 {
    top: 300px;
}

#crabs-container {
    position: absolute;
    left: 270px;
    top: 50px;
    width: 730px;
    height: 489px;
}

#crab-text-container {
    position: absolute;
    top: 79px;
    right: 760px;
    width: 480px;
    height: 440px;
}

.crane {
    position: absolute;
    bottom: 20%;
    width: 110px;
    height: 80%;
    background-image: url(../image/crane.png);
    background-position: 0 100%;
}

#crane-1 {
    left: 7750px;
}

#crane-2 {
    left: 9000px;
}

#detect-container {
    position: absolute;
    background-color: #000;
    padding: 10px;
    display: inline-block;
    opacity: .8;
    filter: alpha(opacity=80);
}

.detect-name {
    font-weight: 700;
    margin-right: 10px;
}

.detect-name,
.detect-value {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-size: 14px;
}

.displaynone {
    display: none;
}

#dock-column,
#dock-floor {
    position: absolute;
    left: 19530px;
    top: 80%;
    width: 2970px;
}

#dock-floor {
    height: 50px;
    background-image: url(../image/dock-floor.png);
}

#dock-column {
    height: 20%;
    background-image: url(../image/dock-column.png);
}

#elevation-1,
#elevation-2 {
    left: 4380px;
    bottom: 20%;
    width: 400px;
    height: 120px;
}

#elevation-2 {
    left: 6080px;
}

#elevation-3,
#elevation-4 {
    left: 16040px;
    bottom: 20%;
    width: 400px;
    height: 150px;
}

#elevation-4 {
    left: 17840px;
}

.elevation,
.elevation-box {
    position: absolute;
}

.elevation-box {
    width: 100%;
    height: 100px;
    bottom: 0;
    background-image: url(../image/box.png);
}

.elevation-floor {
    position: absolute;
    width: 100%;
    height: 50px;
    background-image: url(../image/floor.png);
}

.enemy-face-frame-a,
.enemy-face-frame-b {
    position: absolute;
    left: 0;
    top: 0;
    width: 130px;
    height: 65px;
    background-image: url(../image/enemy-face-frame-a.png);
}

.enemy-face-frame-b {
    width: 160px;
    height: 80px;
    background-image: url(../image/enemy-face-frame-b.png);
}

#experience-1-container {
    position: absolute;
    left: 14840px;
    bottom: 20%;
    width: 1000px;
    height: 80%;
}

#experience-2-container {
    width: 1000px;
}

#experience-2-container,
#experience-3-container {
    position: absolute;
    bottom: 20%;
    height: 80%;
}

#experience-2-container {
    left: 16640px;
}

#experience-3-container {
    left: 18440px;
    width: 900px;
}

.experience-text-a,
.experience-text-b {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: #fff;
    font-size: 35px;
    line-height: 35px;
}

.experience-text-b {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 54px;
}

.experience-text-c {
    width: 100%;
}

.experience-text-c,
.experience-text-d,
.experience-text-e {
    position: relative;
    margin-bottom: 20px;
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-size: 18px;
}

.experience-text-d {
    width: 75%;
}

.experience-text-e {
    width: 85%;
}

.experience-text-container {
    position: absolute;
    bottom: 185px;
    width: 510px;
    background-color: #444;
    padding: 40px;
    border-style: solid;
    border-width: 10px;
    border-color: #777;
}

#email-button,
#fence {
    position: absolute;
    width: 485px;
    height: 230px;
    background-image: url(../image/email-button.png);
}

.face-left {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph;
    filter: fliph;
}

.face-right {
    -moz-transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}

#fence {
    width: 740px;
    height: 100px;
    background-image: url(../image/fence.png);
}

.firework {
    position: relative;
    left: -50%;
    top: -50%;
    width: 500px;
    height: 500px;
    background-color: transparent;
}

.firework-container {
    position: absolute;
    width: 500px;
    height: 500px;
}

#firework-container-1 {
    left: 90%;
    top: 30%;
}

#firework-container-2 {
    left: 10%;
    top: 20%;
}

#firework-container-3 {
    left: 50%;
    top: 10%;
}

#firework-container-4 {
    left: 90%;
    top: 50%;
}

#firework-container-5 {
    left: 30%;
    top: 15%;
}

#firework-container-6 {
    left: 90%;
    top: 30%;
}

#fireworks-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.fish,
.fish-eyes {
    position: absolute;
}

.fish {
    width: 125px;
    height: 93px;
    overflow: hidden;
    background-image: url(../image/fish.png);
}

.fish-eyes {
    left: 18px;
    top: 45px;
    width: 39px;
    height: 18px;
    opacity: 0;
    filter: alpha(opacity=0);
    background-image: url(../image/fish-eyes.png);
}

#fishes-container {
    position: absolute;
    left: 270px;
    top: 50px;
    width: 725px;
    height: 493px;
}

#fish-ribbon-container-1 {
    top: 0;
}

#fish-ribbon-container-2 {
    top: 100px;
}

#fish-ribbon-container-3 {
    top: 200px;
}

#fish-ribbon-container-4 {
    top: 300px;
}

#fish-text-container {
    position: absolute;
    top: 83px;
    right: 760px;
    width: 480px;
    height: 440px;
}

#floor {
    position: absolute;
    width: 100%;
    height: 50px;
    background-image: url(../image/floor.png);
}

@font-face {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    src: url(../font/frankfurter-medium-plain.eot);
    src: url(../font/frankfurter-medium-plain.eot?#iefix) format('embedded-opentype'), 
         url(../font/frankfurter-medium-plain.woff) format('woff'), 
         url(../font/frankfurter-medium-plain.ttf) format('truetype'), 
         url(../font/frankfurter-medium-plain.svg#frankfurter-medium-plain) format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    src: url(../font/frankfurter-plain.eot);
    src: url(../font/frankfurter-plain.eot?#iefix) format('embedded-opentype'), 
         url(../font/frankfurter-plain.woff) format('woff'), 
         url(../font/frankfurter-plain.ttf) format('truetype'), 
         url(../font/frankfurter-plain.svg#frankfurter-plain) format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'lobster';
    src: url(../font/lobster-1.4.eot);
    src: url(../font/lobster-1.4.eot?#iefix) format('embedded-opentype'), 
         url(../font/lobster-1.4.woff) format('woff'), 
         url(../font/lobster-1.4.ttf) format('truetype'), 
         url(../font/lobster-1.4.svg#lobster) format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'poster-sans-bold';
    src: url(../font/poster-sans-bold.eot);
    src: url(../font/poster-sans-bold.eot?#iefix) format('embedded-opentype'), 
         url(../font/poster-sans-bold.woff) format('woff'), 
         url(../font/poster-sans-bold.ttf) format('truetype'), 
         url(../font/poster-sans-bold.svg#poster-sans-bold) format('svg');
    font-weight: 400;
    font-style: normal;
}

.foundation {
    position: absolute;
    top: 80%;
    height: 90%;
    background-image: url(../image/foundation.png);
}

#foundation-1 {
    left: 13320px;
    width: 6220px;
}

.gate {
    position: absolute;
    bottom: 20%;
    width: 320px;
    height: 300px;
    background-image: url(../image/gate.png);
}

#gate-1 {
    left: 2100px;
}

#gate-2 {
    left: 7780px;
}

#gate-3 {
    left: 13320px;
}

#gate-4 {
    left: 19530px;
}

.gate-text {
    position: absolute;
    top: 14px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 60px;
}

#gate-text-1 {
    left: 37px;
}

#gate-text-2,
#gate-text-3 {
    left: 32px;
}

#gate-text-4 {
    left: 29px;
}

.grass {
    position: absolute;
    width: 100%;
    height: 50px;
    background-image: url(../image/grass.png);
}

.ground,
.layer-horizontal {
    position: absolute;
    height: 100%;
}

.ground {
    width: 100%;
    background-image: url(../image/ground.png);
}

#ground-and-grass-container-1 {
    position: absolute;
    left: 0;
    top: 80%;
    width: 8100px;
    height: 90%;
}

#ground-and-grass-container-2 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1160px;
    height: 2000px;
}

img {
    border-style: none;
}

#javascript-banner {
    position: relative;
    left: -50%;
    margin-top: -115px;
    width: 600px;
    height: 230px;
}

#javascript-banner-container {
    position: absolute;
    left: 50%;
    top: 50%;
}

#javascript-banner-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 230px;
    background-image: url(../image/javascript-banner-left.png);
}

#javascript-banner-middle {
    position: absolute;
    left: 79px;
    top: 0;
    width: 440px;
    height: 190px;
    background-color: #f7941d;
}

#javascript-banner-right {
    position: absolute;
    left: 518px;
    top: 0;
    width: 80px;
    height: 230px;
    background-image: url(../image/javascript-banner-right.png);
}

#javascript-banner-text-a,
#javascript-banner-text-b {
    position: relative;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 39px;
    text-align: center;
    margin-top: 37px;
}

#javascript-banner-text-b {
    font-size: 72px;
    margin-top: -12px;
}

.layer-horizontal {
    left: 0;
    top: 100%;
}

#layer-horizontal-1 {
    width: 4000px;
}

#layer-horizontal-2 {
    width: 12000px;
}

#layer-horizontal-3 {
    width: 22500px;
}

.layer-vertical,
.mountain {
    position: absolute;
    bottom: 0;
    width: 100%;
}

#layer-vertical-1 {
    height: 3500px;
}

#layer-vertical-2 {
    height: 6000px;
}

.mountain {
    bottom: 20%;
    width: 800px;
    height: 400px;
    background-image: url(../image/mountain.png);
}

#mountain-1 {
    left: 1000px;
}

#mountain-2 {
    left: 2800px;
}

#nba-ball,
#nba-board-1, 
#nba-board-2, 
#nba-board-3, 
#nba-board-4, 
#nba-board-5, 
#nba-board-6,
.nba-board-blue, 
.nba-board-red {
    display: none !important; 
}

#nba-board-1 {
    left: 0;
    bottom: 0;
}

#nba-board-2 {
    left: 120px;
    bottom: 0;
}

#nba-board-3 {
    left: 240px;
    bottom: 0;
}

#nba-board-4 {
    left: 550px;
    bottom: 0;
}

#nba-board-5 {
    left: 670px;
    bottom: 0;
}

#nba-board-6 {
    left: 790px;
    bottom: 0;
}

.nba-board-blue,
.nba-board-red {
    position: absolute;
    width: 110px;
    height: 140px;
    background-image: url(../image/nba-board-blue.png);
}

.nba-board-red {
    background-image: url(../image/nba-board-red.png);
}

#nba-container {
    position: absolute;
    left: 6680px;
    bottom: 20%;
    width: 900px;
    height: 80%;
}

#nba-player {
    position: relative;
    left: -50%;
    overflow: hidden;
    width: 300px;
    height: 280px;
}

#nba-player-eyes {
    position: absolute;
    left: 92px;
    top: 75px;
    width: 66px;
    height: 30px;
    opacity: 0;
    filter: alpha(opacity=0);
    background-image: url(../image/enemy-face-b-eyes.png);
}

#nba-player-container {
    position: absolute;
    left: 50%;
    bottom: 0;
}

#nba-player {
    position: absolute;
    bottom: -10px !important;
    background-image: url(../image/redbull_transparent.png);
    background-size: 900px auto;
    background-repeat: no-repeat;
    background-position: center bottom;
    width: 900px;
    height: 300px;
    transform: translateY(148px) !important;
}

#nba-player-frame {
    display: none !important;
}

#nba-rim,
#nba-rim-container {
    display: none !important;
}

.nba-text {
    position: relative;
    top: -17px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 120px;
    margin-left: -50%;
}

.nba-text-container {
    position: absolute;
    left: 50%;
}

#hangar,
#hangar-door {
    position: absolute;
    left: 8030px;
    bottom: 20%;
    width: 800px;
    height: 530px;
    background-color: #555;
}

#hangar-door {
    left: 100px;
    bottom: 0;
    width: 600px;
    height: 290px;
    background-color: #333;
}

#hangar-roof {
    position: absolute;
    width: 100%;
    height: 40px;
    background-color: #aaa;
}

#hangar-window {
    position: absolute;
    left: 100px;
    top: 90px;
    width: 600px;
    height: 100px;
    background-image: url(../image/hangar-window.png);
}

#page {
    left: 0;
    top: 0;
    width: 100%;
}

#panel {
    position: absolute;
    top: 60px;
    width: 100%;
    height: 100%;
    background-image: url(../image/panel.png);
}

#panel-and-floor-container {
    position: absolute;
    left: 13320px;
    top: 80%;
    width: 6210px;
    height: 90%;
    background-color: #444;
    overflow: hidden;
}

#piechart-robot-front,
.piechart {
    position: absolute;
    width: 300px;
    height: 300px;
}

.piechart {
    overflow: hidden;
}

#piechart-robot {
    left: 160px;
    top: 30px;
}

#piechart-robot-front {
    left: 0;
    top: 0;
    background-image: url(../image/piechart-front.png);
}

#piechart-robot-text-graphic-1 {
    left: 202px;
    top: 155px;
}

#piechart-robot-text-graphic-2 {
    left: 216px;
    top: 194px;
}

#piechart-robot-text-animation-1 {
    left: 10px;
    top: 97px;
}

#piechart-robot-text-animation-2 {
    left: 46px;
    top: 148px;
}

#piechart-robot-text-code-1 {
    left: 220px;
    top: 67px;
}

#piechart-robot-text-code-2 {
    left: 221px;
    top: 106px;
}

#piechart-alien-front,
.piechart-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 300px;
}

.piechart-back {
    background-image: url(../image/piechart-back.png);
}

#piechart-alien {
    left: 50px;
    top: 130px;
}

#piechart-alien-front {
    background-image: url(../image/piechart-front.png);
}

#piechart-alien-text-graphic-1 {
    left: 25px;
    top: 98px;
}

#piechart-alien-text-graphic-2 {
    left: 42px;
    top: 150px;
}

#piechart-alien-text-animation-1 {
    left: 191px;
    top: 155px;
}

#piechart-alien-text-animation-2 {
    left: 218px;
    top: 193px;
}

#piechart-alien-text-code-1 {
    left: 220px;
    top: 67px;
}

#piechart-alien-text-code-2 {
    left: 221px;
    top: 105px;
}

#piechart-squid {
    left: 135px;
    top: 20px;
}

#piechart-squid-front {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 300px;
    background-image: url(../image/piechart-front.png);
}

#piechart-squid-text-graphic-1 {
    left: 25px;
    top: 98px;
}

#piechart-squid-text-graphic-2 {
    left: 42px;
    top: 150px;
}

#piechart-squid-text-animation-1 {
    left: 191px;
    top: 155px;
}

#piechart-squid-text-animation-2 {
    left: 218px;
    top: 193px;
}

#piechart-squid-text-code-1 {
    left: 220px;
    top: 67px;
}

#piechart-squid-text-code-2 {
    left: 221px;
    top: 105px;
}

.piechart-text-a,
.piechart-text-b {
    position: absolute;
    font-family: poster-sans-bold;
    color: #fff;
    font-size: 36px;
}

.piechart-text-b {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 30px;
}

.piechart-text-c,
.piechart-text-d {
    position: absolute;
    font-family: poster-sans-bold;
    color: #fff;
    font-size: 50px;
}

.piechart-text-d {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 40px;
}

.plant,
.plant-head-leaves {
    position: absolute;
    width: 160px;
    height: 100%;
}

.plant-head-leaves {
    height: 250px;
    background-image: url(../image/plant-head-leaves.png);
}

.plant-stalk {
    position: absolute;
    left: 77px;
    top: 95px;
    width: 6px;
    height: 100%;
    background-color: #a67c52;
}

#plant-1 {
    left: 180px;
    top: 65%;
}

#plant-2 {
    left: 360px;
    top: 65%;
}

#plant-3 {
    left: 540px;
    top: 52%;
}

#plant-4 {
    left: 720px;
    top: 52%;
}

#plants-container {
    position: absolute;
    left: 3280px;
    bottom: 20%;
    width: 900px;
    height: 80%;
}

.plant-line {
    width: 100%;
    height: 1px;
    background-color: #fff;
}

#plant-line-1 {
    bottom: 65%;
}

#plant-line-2 {
    bottom: 52%;
}

#plant-line-3 {
    bottom: 39%;
}

#plant-line-4 {
    bottom: 26%;
}

#plant-line-5 {
    bottom: 13%;
}

.plant-line,
.plant-ribbon {
    position: absolute;
}

#plant-ribbon-container {
    position: absolute;
    width: 1200px;
    height: 40px;
    bottom: 70%;
}

#plant-ribbon-1 {
    left: 196px;
}

#plant-ribbon-2 {
    left: 338px;
}

#plant-ribbon-3 {
    left: 566px;
}

#plant-ribbon-4 {
    left: 712px;
}

.plant-ribbon-left {
    position: relative;
    float: left;
    width: 20px;
    height: 40px;
    margin-right: -1px;
    background-image: url(../image/plant-ribbon-left.png);
}

.plant-ribbon-middle {
    position: relative;
    float: left;
    height: 34px;
    padding-top: 6px;
    padding-left: 2px;
    padding-right: 2px;
    background-color: #f7941d;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 24px;
}

.plant-ribbon-right {
    position: relative;
    float: left;
    width: 20px;
    height: 40px;
    margin-left: -1px;
    background-image: url(../image/plant-ribbon-right.png);
}

#plant-text-1 {
    bottom: 66%;
}

#plant-text-2 {
    bottom: 53%;
}

#plant-text-3 {
    bottom: 40%;
}

#plant-text-4 {
    bottom: 27%;
}

#plant-text-5 {
    bottom: 14%;
}

#preloader,
.plant-text {
    position: absolute;
    left: 0;
}

.plant-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: #fff;
    font-size: 20px;
}

#preloader {
    bottom: 0;
    width: 100%;
    height: 100%;
}

#preloader-banner {
    position: relative;
    left: -50%;
    margin-top: -115px;
    width: 600px;
    height: 230px;
}

#preloader-banner-container {
    position: absolute;
    left: 50%;
    top: 50%;
}

#preloader-banner-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 230px;
    background-image: url(../image/preloader-banner-left.png);
}

#preloader-banner-middle {
    position: absolute;
    left: 79px;
    top: 0;
    width: 440px;
    height: 190px;
    background-color: #f26d7d;
}

#preloader-banner-right {
    position: absolute;
    left: 518px;
    top: 0;
    width: 80px;
    height: 230px;
    background-image: url(../image/preloader-banner-right.png);
}

#preloader-banner-text-a,
#preloader-banner-text-b {
    position: relative;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 72px;
    text-align: center;
    margin-top: 29px;
}

#preloader-banner-text-b {
    font-size: 39px;
    margin-top: -12px;
}

#preloader-dots {
    position: absolute;
    left: 194px;
    top: 130px;
    width: 53px;
    height: 9px;
}

.preloader-dots-animation {
    background-image: url(../image/preloader-dots-animation.gif);
}

.preloader-dots-static {
    background-image: url(../image/preloader-dots-static.png);
}

#robby {
    position: relative;
    left: -50%;
    width: 200px;
    height: 175px;
    overflow: hidden;
}

#robby-container {
    position: absolute;
    left: 50%;
    bottom: 100%;
}

#robby-eyes-close,
#robby-slides {
    position: absolute;
    top: 35px;
    left: 90px;
    width: 55px;
    height: 25px;
    background-image: url(../image/robby-eyes-close.png);
}

#robby-slides {
    left: 0;
    top: 0;
    width: 1800px;
    height: 400px;
    background-image: url(../image/robby-slides.png);
}

#ribbon-2-1 {
    left: 9390px;
    top: 80%;
}

#ribbon-2-2 {
    left: 10735px;
    top: 80%;
}

#ribbon-2-3 {
    left: 12240px;
    top: 80%;
}

#robot,
.ribbon-absolute {
    position: absolute;
}

.ribbon-container {
    position: absolute;
    width: 100%;
    height: 75px;
    top: 5%;
    text-align: center;
}

.ribbon-left {
    position: relative;
    float: left;
    width: 55px;
    height: 75px;
    margin-right: -1px;
    background-image: url(../image/ribbon-left.png);
}

.ribbon-middle {
    position: relative;
    float: left;
    height: 50px;
    background-color: #ed1c24;
    font-family: lobster;
    color: #fff;
    font-size: 36px;
    text-align: center;
}

.ribbon-right {
    position: relative;
    float: left;
    width: 55px;
    height: 75px;
    margin-left: -1px;
    background-image: url(../image/ribbon-right.png);
}

.ribbon-relative {
    display: inline-block;
}

#robot {
    left: 380px;
    bottom: 53px;
    width: 620px;
    height: 492px;
}

#robot-body {
    position: absolute;
    left: 60px;
    top: 0;
    width: 500px;
    height: 399px;
    background-image: url(../image/robot-body.png);
}

.robot-hand-a {
    position: absolute;
    left: 0;
    width: 160px;
    height: 137px;
    background-image: url(../image/robot-hand-a.png);
}

.robot-hand-b {
    left: 20px;
    width: 120px;
    background-image: url(../image/robot-hand-b.png);
}

.robot-hand-b,
.robot-hand-c,
.robot-hand-d {
    position: absolute;
    height: 137px;
}

.robot-hand-c {
    left: 60px;
    width: 40px;
    background-image: url(../image/robot-hand-c.png);
}

.robot-hand-d {
    left: 20px;
    width: 120px;
    background-image: url(../image/robot-hand-d.png);
}

#robot-hand-left,
#robot-hand-right {
    position: absolute;
    left: 0;
    top: 355px;
    width: 160px;
    height: 137px;
}

#robot-hand-right {
    left: 460px;
}

.sea {
    position: absolute;
    top: 90%;
}

#sea-1 {
    left: 8100px;
    width: 5220px;
    height: 80%;
}

#sea-2 {
    left: 19530px;
    width: 2970px;
    height: 10%;
    background-color: #0f172a;
}

#sea-floor {
    position: absolute;
}

#sea-layer-horizontal-1,
.sea-seal {
    width: 100%;
    background-color: #0f172a;
}

.sea-seal {
    position: absolute;
    top: -1px;
    height: 2px;
}

#sea-layer-horizontal-1 {
    left: 0;
    height: 85%;
}

#sea-floor {
    left: 0;
    top: 170%;
    width: 22500px;
    height: 5%;
    background-color: #c69c6d;
}

.sea-ribbon-container {
    position: absolute;
    height: 40px;
    right: 0;
}

.sea-ribbon-left {
    position: relative;
    float: left;
    width: 20px;
    height: 40px;
    margin-right: -1px;
    background-image: url(../image/sea-ribbon-left.png);
}

.sea-ribbon-middle {
    position: relative;
    float: left;
    height: 34px;
    padding-top: 6px;
    padding-left: 2px;
    padding-right: 2px;
    background-color: #f26d7d;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 24px;
}

.sea-ribbon-right {
    position: relative;
    float: left;
    width: 20px;
    height: 40px;
    margin-left: -1px;
    background-image: url(../image/sea-ribbon-right.png);
}

.sea-wave {
    position: absolute;
    bottom: 10%;
    height: 6px;
    background-image: url(../image/sea-wave.png);
}

#sea-wave-1 {
    left: 8100px;
    width: 5220px;
}

#sea-wave-2 {
    left: 19530px;
    width: 2970px;
}

#skill-1-container {
    left: 1020px;
}

#skill-1-container,
#skill-2-container,
#skill-3-container {
    position: absolute;
    bottom: 0;
    width: 1000px;
    height: 90%;
}

#skill-2-container {
    left: 2420px;
}

#skill-3-container {
    left: 3820px;
}

.skill-measurement {
    position: absolute;
    bottom: 0;
    height: 100%;
}

.skill-measurement-1 {
    left: 270px;
}

.skill-measurement-2 {
    left: 420px;
}

.skill-measurement-3 {
    left: 570px;
}

.skill-measurement-4 {
    left: 720px;
}

.skill-measurement-5 {
    left: 870px;
}

.skill-measurement-header {
    position: absolute;
    padding: 6px 10px 5px;
    background-color: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(4px);
    font-family: 'Outfit', sans-serif;
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
    font-size: 18px;
    font-weight: 700;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 4px;
}

.skill-measurement-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.scroll-or-swipe-text-container {
    position: absolute;
    bottom: -120px;
    width: 100%;
    height: 50px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: #fff;
    font-size: 30px;
    text-align: center;
    opacity: 0;
    filter: alpha(opacity=0);
}

#social-bottom {
    position: relative;
    left: 20px;
    width: 80px;
    height: 21px;
    margin-top: -1px;
    background-image: url(../image/social-bottom.png);
}

#social-container {
    position: absolute;
    width: 120px;
    left: 85%;
}

#social-middle {
    position: relative;
    left: 20px;
    width: 70px;
    padding-top: 20px;
    padding-left: 10px;
    padding-bottom: 10px;
    background-color: #ed1c24;
}

#social-top {
    position: relative;
    width: 120px;
    height: 23px;
    margin-bottom: -1px;
    background-image: url(../image/social-top.png);
}

.social-icon {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
}

#splash-container,
#squid {
    position: absolute;
    bottom: 20%;
    width: 1300px;
    height: 548px;
}

#squid {
    left: 430px;
    bottom: 10px;
    width: 570px;
    height: 600px;
}

#squid-body {
    left: 60px;
    top: 0;
    width: 450px;
    height: 544px;
    background-image: url(../image/squid-body.png);
}

#squid-body,
.squid-hand-close,
.squid-hand-open {
    position: absolute;
}

#squid-hand-close-1 {
    left: 0;
    top: 399px;
    width: 80px;
    height: 83px;
    background-image: url(../image/squid-hand-close-a.png);
}

#squid-hand-close-2,
#squid-hand-close-3 {
    left: 100px;
    top: 510px;
    width: 82px;
    height: 81px;
    background-image: url(../image/squid-hand-close-b.png);
}

#squid-hand-close-3 {
    left: 388px;
    background-image: url(../image/squid-hand-close-c.png);
}

#squid-hand-close-4 {
    left: 490px;
    top: 399px;
    width: 80px;
    height: 83px;
    background-image: url(../image/squid-hand-close-d.png);
}

#squid-hand-open-1 {
    left: 0;
    top: 394px;
    width: 85px;
    height: 100px;
    background-image: url(../image/squid-hand-open-a.png);
}

#squid-hand-open-2,
#squid-hand-open-3 {
    left: 94px;
    top: 502px;
    width: 96px;
    height: 97px;
    background-image: url(../image/squid-hand-open-b.png);
}

#squid-hand-open-3 {
    left: 380px;
    background-image: url(../image/squid-hand-open-c.png);
}

#squid-hand-open-4 {
    left: 485px;
    top: 394px;
    width: 85px;
    height: 100px;
    background-image: url(../image/squid-hand-open-d.png);
}

#title-about,
#title-awards-and {
    position: absolute;
    left: 2280px;
    bottom: 20%;
    width: 800px;
    height: 400px;
    background-image: url(../image/title-about.png);
}

#title-awards-and {
    left: 19710px;
    width: 1060px;
    height: 420px;
    background-image: url(../image/title-awards-and.png);
}

#title-contact {
    position: absolute;
    top: 0;
    margin-left: -1040px;
    width: 1080px;
    height: 540px;
    background-image: url(../image/title-contact.png);
}

#title-experience,
#title-leonardi {
    position: absolute;
    left: 13500px;
    bottom: 20%;
    width: 1140px;
    height: 400px;
    background-image: url(../image/title-experience.png);
}

#title-leonardi {
    left: 200px;
    bottom: 0;
    width: 900px;
    height: 258px;
    background-image: url(../image/title-sharma.png);
}



#title-publication,
#title-robby {
    position: absolute;
    left: 19910px;
    bottom: 20%;
    width: 1180px;
    height: 300px;
    background-image: url(../image/title-publication.png);
}
#title-robby {
    left: 0;
    bottom: 0;
    width: 830px;
    height: 348px;
    background-image: url(../image/title-vivek.png);
}


#title-skills {
    position: absolute;
    width: 820px;
    height: 400px;
    background-image: url(../image/title-skills.png);
}

.transparent {
    opacity: 0;
    filter: alpha(opacity=0);
}

#title-skills,
#tree-1,
#tree-2 {
    left: 0;
    bottom: 0;
}

#tree-2 {
    left: 100px;
}

#tree-3,
#tree-4 {
    left: 240px;
    bottom: 0;
}

#tree-4 {
    left: 880px;
}

#tree-5,
#tree-6 {
    left: 920px;
    bottom: 0;
}

#tree-6 {
    left: 1060px;
}

#tree-7 {
    left: 2650px;
    bottom: 20%;
}

#tree-8 {
    left: 2750px;
}

#tree-10,
#tree-8,
#tree-9 {
    bottom: 20%;
}

#tree-9 {
    left: 3010px;
}

#tree-10 {
    left: 2850px;
}

#tree-11 {
    left: -100px;
    bottom: 0;
}

#tree-12 {
    left: 20px;
    bottom: 0;
}

#tree-13 {
    left: 140px;
    bottom: 0;
}

#tree-14 {
    left: 260px;
    bottom: 0;
}

#tree-15 {
    left: 380px;
    bottom: 0;
}

#tree-16 {
    left: 500px;
    bottom: 0;
}

#tree-17 {
    left: 620px;
    bottom: 0;
}

#tree-18 {
    left: 740px;
    bottom: 0;
}

#tree-19 {
    left: 860px;
    bottom: 0;
}

#tree-20 {
    left: -100px;
    bottom: 0;
}

#tree-21 {
    left: 0;
    bottom: 0;
}

#tree-22 {
    left: 160px;
    bottom: 0;
}

#tree-23 {
    left: 600px;
    bottom: 0;
}

#tree-24 {
    left: 700px;
    bottom: 0;
}

#tree-25 {
    left: 860px;
    bottom: 0;
}

.tree-bright-a {
    position: absolute;
    width: 140px;
    height: 95px;
    background-image: url(../image/tree-bright-a.png);
}

.tree-bright-b,
.tree-bright-c {
    position: absolute;
    width: 140px;
    height: 185px;
    background-image: url(../image/tree-bright-b.png);
}

.tree-bright-c {
    width: 200px;
    height: 240px;
    background-image: url(../image/tree-bright-c.png);
}

.tree-bright-d,
.tree-bright-e,
.tree-dark-a {
    position: absolute;
    width: 200px;
    height: 300px;
    background-image: url(../image/tree-bright-d.png);
}

.tree-bright-e,
.tree-dark-a {
    height: 430px;
    background-image: url(../image/tree-bright-e.png);
}

.tree-dark-a {
    width: 140px;
    height: 95px;
    background-image: url(../image/tree-dark-a.png);
}

.tree-dark-b {
    width: 140px;
}

.tree-dark-b,
.tree-dark-c {
    position: absolute;
}

.tree-dark-b {
    height: 185px;
    background-image: url(../image/tree-dark-b.png);
}

.tree-dark-c {
    width: 200px;
    height: 240px;
    background-image: url(../image/tree-dark-c.png);
}

.tree-dark-d {
    position: absolute;
    width: 200px;
    height: 300px;
    background-image: url(../image/tree-dark-d.png);
}

.tree-dark-e {
    width: 200px;
}

.tree-dark-e,
.turtle {
    position: absolute;
}

.tree-dark-e {
    height: 430px;
    background-image: url(../image/tree-dark-e.png);
}

.turtle {
    width: 125px;
    height: 75px;
    overflow: hidden;
    background-image: url(../image/turtle.png);
}

.turtle-eyes {
    position: absolute;
    left: 3px;
    top: 27px;
    width: 39px;
    height: 18px;
    opacity: 0;
    filter: alpha(opacity=0);
    background-image: url(../image/turtle-eyes.png);
}

#turtle-ribbon-container-1 {
    top: 0;
}

#turtle-ribbon-container-2 {
    top: 100px;
}

#turtle-ribbon-container-3 {
    top: 200px;
}

#turtle-ribbon-container-4 {
    top: 300px;
}

#turtles-container,
.waterfall {
    position: absolute;
    left: 270px;
    top: 50px;
    width: 725px;
    height: 475px;
}

#turtle-text-container {
    position: absolute;
    top: 65px;
    right: 760px;
    width: 480px;
    height: 440px;
}

.waterfall {
    left: 150px;
    top: 0;
    width: 860px;
    height: 100%;
}

#waterfall-1 {
    background-image: url(../image/waterfall-a.png);
}

#waterfall-2 {
    background-image: url(../image/waterfall-b.png);
}

.window {
    position: absolute;
    width: 190px;
    height: 110px;
    background-image: url(../image/window.png);
}

/* ============================================
   MOBILE TOUCH HARDENING
   ============================================ */
#container {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: none;
}

html, body {
    overscroll-behavior: none;
}